<template>
	<view class="mainPage whitePage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title" shadow></public-head>
		<view class="box">
			<view class="list" v-if="articleList.length">
				<view class="item" v-for="(item,index) in articleList" :key="index">
					<navigator hover-class="none" :url="'./articleDetails?articleId='+item.id">
						<view class="top">
							<view class="left" :class="!item.thumb?'active':''">
								<view class="neirong-title">
									{{item.title.slice(0,20)}}
								</view>
								<view class="desc">
									{{item.content}}
								</view>
							</view>
							<view class="right" v-if="item.thumb">
								<image :src="item.thumb" mode=""></image>
							</view>
						</view>
						<view class="bottom">
							<view class="left">
								发布于 <text class="time">{{item.time}}</text><text class="liulang">{{item.browse}}浏览量</text>
							</view>
							<view class="right" @click.stop="shanchu(item.id,item.write_status,index)" v-show="item.is_to_examine == 1">
								<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/shanchu.png" mode=""></image>
								<text>删除</text>
							</view>
							<view class="right">
								<text style="color: #FF9900;" v-show="item.is_to_examine == 0">审核中</text>
							</view>
						</view>
					</navigator>
				</view>
			
				<u-loadmore class="load-marTop" v-if="articleList.length>=10" :status="status" :load-text="loadText" />
			</view>
			<view class="zanwuyuyue" v-else>
				<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/zanwu.png" mode=""></image>
				<text>暂无草稿</text>
			</view>
		</view>
		
		<u-popup class="u-popup nobgPopup" v-model="show" mode="bottom" :safe-area-inset-bottom="true">
			<view class="anniu-box"> 
				<view class="queren" @click="qeuren">
					确认
				</view>
				<view class="quxiao" @click="quxiao">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '我的文章',
				show: false,
				
				articleList:[],
				articleId:"",
				articleStatus:"",
				articleIndex:"",//当前文章的索引
				
				page:1,
				
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		onReachBottom() {   ///page 加载
			if(that.status == 'nomore'){
				return
			}
			console.log("触底la")
			that.status = 'loading';
			that.page = ++ that.page;
			setTimeout(() => {
				that.requestData(that.page)
			}, 500)
		},
		onLoad() {
			that=this
			that.requestData(that.page)
		},
		methods: {
			shanchu(id,status,index){
				that.show=true
				that.articleId=id
				that.articleStatus=status
				that.articleIndex=index
			},
			qeuren(){
				console.log("确认")
				
				uni.showLoading({
					mask: true
				});
				that.$postAjax1('PetDoctor_draft_del',{  //https://ask.suoweilai.com/PetDoctor_draft_del 医生端-文章中心 - 文章中心-草稿/文章删除
					article_id:that.articleId,
					input_article_write:that.articleStatus,
				},function(data){
					uni.hideLoading()
					if(data.data.data==1){
						uni.showToast({
							icon:"none",
							title:"删除成功",
							duration: 2000
						})
						that.articleList.splice(that.articleIndex,1)
						// that.requestData()
					}else{
						uni.showToast({
							icon:"none",
							title:"删除失败"
						})
					}
				})
				
				
				that.show=false
			},
			quxiao(){
				that.show=false
			},
			
			requestData(page){  //https://ask.suoweilai.com/PetDoctor_article_lists  医生端-文章中心 - 文章中心-我的文章
				uni.showLoading({
					mask: true
				});
				that.$postAjax1('PetDoctor_article_lists',{
					page:page
				},function(data){
					console.log(data.data.data,9999)
					// return
					for(var i=0;i<data.data.data.length;i++){
						data.data.data[i].content=data.data.data[i].content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g,'。').replace(/&nbsp;/ig,'').replace(/(\n)/g, "").replace(/(\t)/g, "").replace(/<\/?[^>]*>/g, "")
					}
					
					uni.hideLoading()
					if(that.page==1){
						that.articleList=data.data.data
					}else{
						that.articleList=that.articleList.concat(data.data.data)
					}
					if(data.data.data.length<10) that.status = 'nomore';
					else that.status = 'loading';
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
.box{
	padding: 0 32rpx 100rpx;
	.list{
		.item{
			padding: 18rpx 0;
			border-bottom: 2rpx solid rgba(0,0,0,0.08);
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.left{
					width: calc(100% - 226rpx - 32rpx);
					min-height: 180rpx;
					&.active{
						width: 100%;
					}
					.neirong-title{
						font-size: 32rpx;
						font-weight: 500;
						color: #343434;
						line-height: 44rpx;
						margin-bottom: 10rpx;
						
					}
					.desc{
						font-size: 28rpx;
						line-height: 38rpx;
						font-weight: 400;
						color: #343434;
						width: 100%;
						
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						
					}
				}
				.right{
					image{
						display: inline-block;
						width: 226rpx;
						height: 176rpx;
					}
				}
			}
			.bottom{
				display: flex;
				justify-content:space-between;
				align-items: center;
				.left{
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 36rpx;
					.time{
						margin-left: 20rpx;
						margin-right: 26rpx;
					}
					.liulang{
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 36rpx;
					}
				}
				.right{
					image{
						line-height: 36rpx;
						display: inline-block;
						width: 28rpx;
						height: 28rpx;
						margin-right: 4rpx;
						vertical-align: middle;
					}
					text{
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 36rpx;
						vertical-align: middle;
					}
				}
			}
		}
	}

	.zanwuyuyue{
		padding-top: 450rpx;
		text-align: center;
		image{
			display: block;
			margin: auto;
			width: 220rpx;
			height: 220rpx;
			margin-bottom: 50rpx;
		}
		text{
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: #959595;
		}
	}
}

.u-popup{
	.anniu-box{
		background-color: transparent;
		padding:0  16rpx 76rpx;
		.queren{
			width: 100%;
			height: 116rpx;
			background: #EFEFEF;
			border-radius: 26rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: 400;
			color: #E02020;
			line-height: 116rpx;
			margin-bottom: 16rpx;
		}
		.quxiao{
			width: 100%;
			height: 116rpx;
			background: #EFEFEF;
			border-radius: 26rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: 400;
			line-height: 116rpx;
			color: #2F78F3;
		}
	}
}
</style>
